function showHotHosting(containerID, showDetail) {
    $.get('data/hosting.xml', function(data){
        var hotPlans = $(data).find('plan[hot="true"]');
        var html = "";
        
        if(showDetail == true) {
            hotPlans.each(function(i){
                var flatform = $(this).parent('flatform').attr('type');
                
                html += '<div class="box col-'+ (i + 1) +' maxheight">';
                html += '   <div class="border-right maxheight">';
                html += '       <div class="border-bot maxheight">';
                html += '           <div class="border-left maxheight">';
                html += '               <div class="left-top-corner maxheight">';
                html += '                   <div class="right-top-corner maxheight">';
                html += '                       <div class="right-bot-corner maxheight">';
                html += '                           <div class="left-bot-corner maxheight">';
                html += '                               <div class="inner">';
                html += '                                   <h3>'+ $(this).find('name').text() +'</h3>';
                html += '                                   <ul class="info-list">';
                html += '                                       <li><span>Disk space</span>'+ $(this).find('diskSpace').text() +'MB</li>';
                html += '                                       <li><span>Monthly transfer</span>'+ $(this).find('bandwidth').text() +'MB</li>';
                html += '                                       <li><span>FTP accounts</span>'+ $(this).find('ftpAccounts').text() +'</li>';
                html += '                                       <li><span>Domains</span>'+ $(this).find('domains').text() +'</li>';
                html += '                                       <li><span>Subdomains</span>'+ $(this).find('subdomains').text() +'</li>';
                html += '                                   </ul>';
                html += '                                   <span class="price">$ '+ $(this).find('pricePerMonth').text() +' p/m</span>';
                html += '                                   <div class="aligncenter"><a href="hosting.html?flatform='+ $(this).parent('flatform').attr('type') +'" class="link1"><span><span>Learn More</span></span></a></div>';
                html += '                               </div>';
                html += '                           </div>';
                html += '                       </div>';
                html += '                   </div>';
                html += '               </div>';
                html += '           </div>';
                html += '       </div>';
                html += '   </div>';
                html += '</div>';    
            });    
        } else {
            hotPlans.each(function(){
                html += '<li>';
                html += '<a href="hosting.html?flatform='+ $(this).parent('flatform').attr('type') +'">'+ $(this).find('name').text() +' <b>$'+ $(this).find('pricePerMonth').text() +'</b></a>';
                html += '</li>';    
            });
        }
        
        $('#' + containerID).html(html);
    }, 'xml');
}